<template>
	<div class="kanban-main-warp animated" style="display: block;" v-loading.body="loading">
		<div class="kanban-main-container content">
			<div class="kanbanCard-main-container">
				<div class="cardList-container-warp">
					<ul class="cardList-container ui-sortable">
						<li class="kanban-card-container list-monday animated"  v-for="(item1,index1) in monthsList">
							<div class="kanban-card-container" v-if="index1==curMonth" id="curPosition">
                <div class="kanban-card-warp">
                  <div class="card-table">
                    <div class="head-tr">
                      <div class="header" style="display: block;">
                        <div class="attr" @dblclick="jumpToOneTask({type:'yearTask',title:item1.monthStr,list:item1.list,key:'due',val:item1.due})"><span>{{item1.monthStr}}</span></div>
                      </div>
                      <div class="card-rename" style="display:none;">
                        <input type="text" v-model="addCardItemTitle" placeholder="标题">
                        <span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithDue({'due':item1.due})">保存</span>
                        <div style="clear: both"></div>
                      </div>
                      <i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i></div>
                    <div class="body-tr">
                      <div class="body-tr-container">
                        <div class="kanban-item-warp">
                          <ul class="kanban-item-list">
                            <div class="itemTop"></div>
                            <div class="kanbanItem-add" style="display: none;"><textarea placeholder="任务标题"></textarea><input type="checkbox" name="">
                              <ul style="height:6px"></ul><span class="btn btn-primary save">创建</span><span class="btn btn-secondary cancel">取消</span>
                              <div style="clear: both"></div>
                            </div>
                            <ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
                              <draggable class="dragArea today-task-list" :list="item1.list" tagKey="due" :tagVal="item1.due" :options="{group:'task'}" @add="dragAdd" @start="dragStart()" @end="dragEnd()">
                                <li class="kanban-Item-container animated tooltipstered"
                                    :class="[item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state),...checkLevel(item2.tags)]"
                                    v-for="(item2,index2) in item1.list"
                                    :key="item2.id"
                                    :id="item2.id"
                                    tabindex="1"
                                    :taskId="item2.id"
                                    draggable="false"
                                    @keyup.ctrl.up="up(index2,monthsList[index1].list)"
                                    @keyup.ctrl.down="down(index2,monthsList[index1].list)"
                                    @dblclick="showDetail(item2.id)">
                                  <el-popover
                                    placement="right"
                                    width="500"
                                    trigger="hover"
                                    :open-delay='500'
                                    @show="loadPic(index2,item2)"
                                  >
                                    <div style="text-align: center; margin:0">
                                      <div v-html="templateData"></div>
                                    </div>
                                    <div slot="reference">
                                      <div class="left">
                                        <el-checkbox  @change="changeTaskStatusBox(item2)" v-model="item2.finished"></el-checkbox></div>
                                      <div class="right">
                                        <div class="portrait-container">
                                          <img class="portrait" :src="item2.mhead" v-if="item2.mhead" draggable="false">
                                          <!--<div class="time">07-11</div>-->
                                        </div>
                                        <div class="row1"><span  class="kanban-item-title">{{(index2+1)+'.'+item2.title}}</span>
                                          <div class="receive-btn" style="display: none;">领取</div>
                                        </div>
                                        <div class="dateNode node"></div>
                                      </div>
                                    </div>
                                  </el-popover>
                                </li>
                              </draggable>
                            </ul>
                          </ul>
                        </div>
                        <div class="no-task-container" v-show="item1.list.length==0">
                          <img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
                          <p>点击创建新任务</p>
                          <p>或使用+号创建新任务</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer">
                    <div class="bottom" style="display:block">
                      <span> 任务 {{item1.finishNum}} / {{item1.list.length}}</span>
                    </div>
                  </div>
                </div>
              </div>
							<div class="kanban-card-container" v-else >
								<div class="kanban-card-warp">
									<div class="card-table">
										<div class="head-tr">
											<div class="header" style="display: block;">
												<div class="attr" @dblclick="jumpToOneTask({type:'yearTask',title:item1.monthStr,list:item1.list,key:'due',val:item1.due})"><span>{{item1.monthStr}}</span></div>
											</div>
											<div class="card-rename" style="display:none;">
												<input type="text" v-model="addCardItemTitle" placeholder="标题">
												<span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithDue({'due':item1.due})">保存</span>
												<div style="clear: both"></div>
											</div>
											<i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i></div>
										<div class="body-tr">
											<div class="body-tr-container">
												<div class="kanban-item-warp">
													<ul class="kanban-item-list">
														<div class="itemTop"></div>
														<div class="kanbanItem-add" style="display: none;"><textarea placeholder="任务标题"></textarea><input type="checkbox" name="">
															<ul style="height:6px"></ul><span class="btn btn-primary save">创建</span><span class="btn btn-secondary cancel">取消</span>
															<div style="clear: both"></div>
														</div>
														<ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
															<draggable class="dragArea today-task-list" :list="item1.list" tagKey="due" :tagVal="item1.due" :options="{group:'task'}" @add="dragAdd" @start="dragStart()" @end="dragEnd()">
																<li class="kanban-Item-container animated tooltipstered"
																	:class="[item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state),...checkLevel(item2.tags)]"
																	v-for="(item2,index2) in item1.list"
																	:key="item2.id"
																	:id="item2.id"
																	tabindex="1"
																	:taskId="item2.id"
																	draggable="false"
																	@keyup.ctrl.up="up(index2,monthsList[index1].list)"
                                    								@keyup.ctrl.down="down(index2,monthsList[index1].list)"
																	@dblclick="showDetail(item2.id)">
																	<el-popover
																		placement="right"
																		width="500"
																		trigger="hover"
																		:open-delay='500'
                                    @show="loadPic(index2,item2)"
                                  >
																		<div style="text-align: center; margin:0">
																		<div v-html="templateData"></div>
																		</div>
																		<div slot="reference">
																		<div class="left">
																			<el-checkbox  @change="changeTaskStatusBox(item2)" v-model="item2.finished"></el-checkbox></div>
																		<div class="right">
																			<div class="portrait-container">
																			<img class="portrait" :src="item2.mhead" v-if="item2.mhead" draggable="false">
																			<!--<div class="time">07-11</div>-->
																			</div>
																			<div class="row1"><span  class="kanban-item-title">{{(index2+1)+'.'+item2.title}}</span>
																			<div class="receive-btn" style="display: none;">领取</div>
																			</div>
																			<div class="dateNode node"></div>
																		</div>
																		</div>
																	</el-popover>
																</li>
															</draggable>
														</ul>
													</ul>
												</div>
												<div class="no-task-container" v-show="item1.list.length==0">
													<img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
													<p>点击创建新任务</p>
													<p>或使用+号创建新任务</p>
												</div>
											</div>
										</div>
									</div>
									<div class="footer">
										<div class="bottom" style="display:block">
											<span> 任务 {{item1.finishNum}} / {{item1.list.length}}</span>
										</div>
									</div>
								</div>
							</div>
						</li>
						</ul>
				</div>
			</div>
		</div>
		<div class="kanban-main-container" id="taskeditor" style="position:absolute" @keydown.esc="escEditor()" tabindex="1" >
		</div>
		<div class="task-detail-container" tabindex="1" @keydown.esc="escTaskDetail()" >
			<task-detail ref="taskDetailComponent"></task-detail>
		</div>
		<!--<date-line></date-line>-->
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import _ from "underscore";
	import moment from "moment";
	import taskDetail from '../../components/task/taskDetail.vue'
	import api from '../../api';
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	import {mixinEditor} from "../../common/mixinEditor";
	import { bus } from "../../common/bus";
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {
			'task-detail': taskDetail,
			draggable
		},
		data() {
			return {
				loading:false,
        templateData:'',
				monthsList:[],
        curMonth:1,
				searchDaysStr:'',//时间相同，则不重复请求数据
			};
		},
		mixins: [taskAndTag,mixinPc,mixinEditor],
		computed: {
			...mapState({
				uid: state => state.vux.uid,
				minDate: state => state.z39.minDate,
				maxDate: state => state.z39.maxDate,
				showMonth:state=>state.z39.showMonth,
				taskAll: state => state.z39.taskAll,
				tagDic: state => state.z39.tagDic,
				taskDic: state => state.z39.taskDic,
				tagitems: state => state.z39.tagitems,
				tagitemDic: state => state.z39.tagitemDic,
				days: state => state.z39.days,
				projects: state => state.z39.projects,
				members: state => state.z39.members,
				todayTags: state => state.z39.tagtmps,
				memberDic: state => state.z39.memberDic,
				daySelect: state =>state.z39.selectedDayDate,
				showYear: state =>state.z39.showYear,
				filterTaskState: state =>state.z39.filterTaskState,
			}),
			getList:function(){
				var _this=this;
				if(this.searchDaysStr!=this.showYear){
					this.searchDaysStr=this.showYear;
					this.getTasksList({day:this.showYear})
					//时间相同，则不重复请求数据
				}

				var months=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
				var monthsList=[];
				for(var i=0;i<12;i++){
					var monthDue=this.showYear+'-'+(i<9?('0'+(i+1)):(i+1))
					//console.log(monthDue)
					var obj={
						monthStr:months[i],
						due:monthDue,
						list:this.taskAll.filter(function(task) {
							if(task.tags && task.tags["life"] !=undefined) return false ;
							if(_this.filterTaskState==''||_this.filterTaskState==0){
								return task.uid == _this.uid &&task.parid == null && task.tags && task.tags["due"] && task.tags["due"]&&(task.tags["due"].indexOf('-')>-1)&&(moment(task.tags["due"]).format('YYYY-MM')==monthDue)
							}else if(_this.filterTaskState==1){
								return task.uid == _this.uid &&task.parid == null && task.tags && task.tags["due"] && task.tags["due"]&&(task.tags["due"].indexOf('-')>-1)&&(moment(task.tags["due"]).format('YYYY-MM')==monthDue)&&task.state!='done'&&task.state!='cancelled'
							}else if(_this.filterTaskState==2){
								return task.uid == _this.uid &&task.parid == null && task.tags && task.tags["due"] && task.tags["due"]&&(task.tags["due"].indexOf('-')>-1)&&(moment(task.tags["due"]).format('YYYY-MM')==monthDue)&&task.state=='done'
							}
						})
					}
					obj.finishNum=obj.list.filter(function(task) {
							return task.state&&task.state=='done'
						}).length
					monthsList.push(obj)
				}
				this.monthsList = Object.assign([], this.monthsList, monthsList)
				return monthsList
			}
		},
		watch:{
			"taskAll": {
				handler(){
					this.$parent.nones;
//					console.log(this.tagDic['1982_due'].id)
					this.getList;
				},
				deep:true,
			},
			'showYear':function(){
				this.getList;
			},
			filterTaskState:function(){
				this.getList;
			}
		},
		methods: {
			dragStart(){
			  this.$parent.dragStart();
      },
      dragEnd(){
        this.$parent.dragEnd();
      },
			daterangeChange(currentDate) {
		  	},
			showDetail: function(taskId) {
        //由于会引起闪屏，所以关掉
				//$('.task-detail-container').focus()
				this.$refs.taskDetailComponent.showTaskDetail(taskId)
			},
      trueActive: function (e) {
        e.target.getElementsByClassName('receive-btn')[0].style.display='block'
        e.target.getElementsByClassName('receive-btn')[0].style.right='0'
      },
      falseActive: function (e) {
        e.target.getElementsByClassName('receive-btn')[0].style.display='none'
        e.target.getElementsByClassName('receive-btn')[0].style.right='-75px'
      },
      loadPic:function (index,desc) {
        this.templateData = desc.title+desc.desc;
      }
		},
		created() {
//			this.getList;
		},
		mounted() {
			bus.$on('toShowTaskDetail', id => {
				console.log("sdfsd")
				this.showDetail(id)
			})
			this.getList;
      this.curMonth = moment().month()
      //console.log(this.curMonth)
			this.$nextTick(function(){

        var lefts=$('#curPosition').offset().left
       // console.log(lefts-340)
        var leftMenuWidth = $(".container-left-content").width();
        //console.log(leftMenuWidth)
        $('.kanbanCard-main-container').animate({scrollLeft:lefts-leftMenuWidth-30 + "px"}, 500);

      })

		}
	}
</script>

<style>
@media screen and (max-height: 1280px){
  #taskeditor {
    display: none;
    width: calc(100% - 380px) !important;
    margin-right: 5px;
	height: 104% !important;
  }
}
 @media screen and (max-height: 800px){
    #taskeditor{
      display: none;
      height: 108% !important;
      margin-top: -22px;
      width: calc(100% - 310px) !important;
      margin-right: 1px;
    }
  }
	/* #taskeditor {
		display: none;
		width: calc(100% - 300px)!important;
	} */

.task-main-container li .critical {
  border: 1px solid #1ba4ff;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px #1ba4ff inset*/
}
.task-main-container li .high {
  border: 1px solid #72c7ff;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px #72c7ff inset*/
}
.task-main-container li .low {
  border: 1px solid #f7c3c3;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px #FF6666 inset*/
}
.task-main-container li .minor {
  border: 1px solid red;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px red inset*/
}
.task-main-container li .life {
  border: 1px solid orange;
  border-radius: 5px;
  /*box-shadow: 0px 0px 10px 3px orange inset*/
}
</style>
